<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.三维场景</title>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
</head>
<body>

<div id="menu" style="padding: 10px">
<!--    <button id="menu_render">渲染</button>-->
</div>
<div id="webgl" style="border-width: 1px;border-color: blue;border-style: solid"></div>

<script>

    function threeJs() {

        //场景
        var scene = new THREE.Scene();  //创建场景对象Scene

        //立方体
        var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
        geometry.faces.pop();  //移除最后一个三角面
        geometry.faces.shift();  //移除第一个三角面
        var material = new THREE.MeshLambertMaterial({   //材质对象Material
            color: 0xffffff,
            side: THREE.DoubleSide, //两面可见
        });
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        // mesh.translateX(100);
        scene.add(mesh);  //网格模型添加到场景中

        //球体
        var geometry1 = new THREE.SphereGeometry(50, 40, 40); //创建一个球体几何对象
        var material1 = new THREE.MeshPhongMaterial({   //材质对象Material
            color: 0x00ff00,
            specular: 0xffffff,
            shininess: 12
        });
        var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
        mesh1.translateY(100);
        scene.add(mesh1);  //网格模型添加到场景中

        //圆柱
        var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
        var material3 = new THREE.MeshLambertMaterial({
            color: 0x0000ff,
            opacity: 0.7,
            transparent: true
        });
        var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
        mesh3.position.set(0, 0, 100);//设置mesh3模型对象的xyz坐标为120,0,0
        scene.add(mesh3);

        //正二十面体
        var geometry4 = new THREE.IcosahedronGeometry(50);
        var material4 = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false,  //显示线框
        });
        var mesh4 = new THREE.Mesh(geometry4, material4); //网格模型对象Mesh
        mesh4.translateX(100);
        scene.add(mesh4);

        //辅助坐标系
        var axisHelper = new THREE.AxisHelper(250);
        scene.add(axisHelper);

        //光源设置
        var point = new THREE.PointLight(0x666666);  //点光源
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point);//点光源添加到场景中

        var point2 = new THREE.PointLight(0x666666);  //点光源
        point2.position.set(-400, -200, -300); //点光源位置
        scene.add(point2);//点光源添加到场景中

        //环境光
        var ambient = new THREE.AmbientLight(0x777777);
        scene.add(ambient);//环境光添加到场景中


        //相机设置
        var width = window.innerWidth;
        var height = window.innerHeight;
        var k = width / height;  //窗口宽高比
        var s = 200;  //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 200, 100);  //设置相机位置
        camera.lookAt(scene.position);  //设置相机方向（指向的场景对象）

        //创建渲染对象
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        renderer.setClearColor(0xFFFFFF, 1);
        document.getElementById("webgl").appendChild(renderer.domElement);

        //--------直接渲染--------
        // renderer.render(scene, camera);  //执行渲染操作

        //--------旋转----------
        // let t0 = new Date();//上次时间
        //
        // function render() {
        //     let t1 = new Date(); //本次时间
        //     let t = t1 - t0;//时间差
        //     t0 = t1;
        //
        //     requestAnimationFrame(render);//请求再次执行渲染函数render
        //     renderer.render(scene, camera);  //执行渲染操作
        //     mesh.rotateY(0.001*t);  //旋转角速度0.001弧度每毫秒
        // }
        //
        // render();

        //--------鼠标操作---------
        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }

        render();
        var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
        // controls.addEventListener('change',render);
    }
    threeJs();
    // document.getElementById("menu_render").onclick=function () {
    //     threeJs();
    // }

</script>

</body>
</html>